<template>
	<view class="tui-container">
		<view class="tui-login__header">
			<image class="tui-header__img" mode="widthFix" src="/static/images/login/img_login_bg_3x.png"></image>
			<view class="tui-header__inner">
				<!-- #ifndef H5 -->
				<tui-navigation-bar @init="initNavigation">
					<!-- #ifndef MP-ALIPAY || MP-BAIDU -->
					<view class="tui-header__icon" :style="{ marginTop: top + 'px' }">
						<tui-icon name="arrowleft" color="#fff" unit="rpx" :size="68" @click="back"></tui-icon>
					</view>
					<!-- #endif -->
				</tui-navigation-bar>
				<!-- #endif -->
				<view class="tui-header__title" :style="{paddingTop:top+50+'px'}">
					<text class="tui-title__text">签到</text>
					<text class="tui-sub__text">欢迎来到学习签到</text>
				</view>
			</view>
		</view>
		<view class="tui-form__box">
			<image class="tui-login__img" src="/static/images/login/img_login_3x.png" mode="widthFix"></image>
			<view class="tui-form__title">签到</view>
			<view class="tui-page__bd">
				<tui-form :tip-top="0" ref="form" :show-message="false" :model="formData">
					
					
					
					<tui-form-item asterisk label="部门" arrow highlight prop="area" @click="pickerShow">
						<tui-input padding="0" :borderBottom="false" placeholder="请选择部门" disabled
							backgroundColor="transparent" v-model="formData.area"></tui-input>
					</tui-form-item>
					
					<tui-form-item label="姓名" asterisk prop="name">
						<tui-input padding="0" :borderBottom="false" placeholder="请输入姓名"
							v-model="formData.name"></tui-input>
					</tui-form-item>
					
					<view class="tui-btn__box">
						<tui-button width="400rpx" height="84rpx" bold @click="submit">提交</tui-button>
					</view>
				</tui-form>
			</view>
		</view>
		<tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange">
		</tui-picker>
		<!--居中消息-->
		<tui-tips ref="toast" backgroundColor="#5677fc" color="#ff0000" :size="30"></tui-tips>
		<div class="footer">
		  <!--<p>© 2023 UniApp二维码验证系统 | 安全可靠的身份验证解决方案</p> -->
		  <a href="https://beian.miit.gov.cn" class="beian-link" target="_blank">
		        <span class="beian-icon"></span>
		        冀ICP备2024093937号-1
		  </a>
		  
		</div>
	</view>
</template>

<script>
	const rules = [ {
		name: "name",
		rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
		msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
	}, {
		name: "area",
		rule: ["required"],
		msg: ["请选择地区"]
	}];
	export default {
		computed: {
			disabled: function() {
				let bool = true;
				if (this.mobile && this.u_password) {
					bool = false;
				}
				return bool;
			}
		},
		data() {
			return {
				rules,
				areaData: [],
				show: false,
				top: 20,
				companyDeptId: '',
				
				
				formData: {
					
					//姓名
					name: '',
					//地区
					area: ''
				}
			}
		},
		methods: {
			pickerShow() {
				this.show = true
			},
			pickerHide() {
				this.show = false
			},
			pickerChange(e) {
				//console.log(e)
				this.formData.area = e.text,
				this.companyDeptId = e.value
			},
			submit() {
				console.log('11111')
				//注：结合FormItem校验，validate方法第三个参数必须传true
				//rules 如果传入null或空数组，会合并FormItem中传入的rules数据（如果有传入）
				this.$refs.form.validate(this.formData, rules, true).then(res => {
					if (res.isPass) {
						/* console.log(this.formData)
						this.tui.toast('校验通过！') */
						console.log('2222')
						//签到接口
						this.$api.sign_in(
						 {
							companyDeptId: this.companyDeptId,
							employeeName: this.formData.name
						 },
						 (res)=>{
							if(res.code==200){
								let options = {
									msg: "签到成功",
									duration: 2000
								};
								setTimeout(() => {
									this.$refs.toast.showTips(options);
								}, 300);
								uni.redirectTo({
									url: '/pages/sign-in-success/sign-in-success'
								})
								
							}else{
								let options = {
									msg: res.msg,
									duration: 2000
								};
								setTimeout(() => {
									this.$refs.toast.showTips(options);
								}, 300);
							}
						});
					} else {
						console.log(res)
					}
				}).catch(errors => {
					console.log(errors)
				})
			},
			initNavigation(e) {
				this.top = e.top;
			},
			back() {
				uni.navigateBack();
			},
			onLoad: function (option){
				
					let _this = this;
					_this.$api.get_company_dept(
					 {},
					 (res)=>{
						if(res.code==200){
							//console.log(res.subjects)
							_this.areaData = _this.transformData(res.allDeptList);
							
							//console.log(_this.areaData)
						}else {
							let options = {
								msg: res.msg,
								duration: 2000
							};
							setTimeout(() => {
								_this.$refs.toast.showTips(options);
							}, 300);
						}
					}) 
			},
			// 转换数据格式
			    transformData(apiData) {
			      // 根据您的API返回数据结构进行调整
			      return apiData.map(item => {
			        return {
			          value: item.id, // 值字段
			          text: item.deptName // 显示文本字段
			          // 可以根据需要添加其他字段
			        }
			      })
			  },
			login(){
				var mobile = this.mobile.replace(/\s+/g,'');
				var u_password = this.u_password.replace(/\s+/g,'');
				if(!isPhoneNumber(mobile)){
					 setTimeout(() => {
					 	this.tui.toast('请填写正确的手机号');
					 }, 200);
					 return;
				}
				//登录接口
				this.$api.login(
				 {
					umobile: mobile,
					upwd: u_password
				 },
				 (res)=>{
					if(res.code==200){
						console.log('11111')
						/* uni.switchTab({
							url: '/pages/index/index'
						}) */
					}else{
						//this.tui.toast(res.msg)
						let options = {
							msg: res.msg,
							duration: 2000
						};
						setTimeout(() => {
							this.$refs.toast.showTips(options);
						}, 300);
					}
				});
			}
		}
	}
</script>

<style>
.tui-btn__box {
		width: 100%;
		padding: 60rpx 0;
		display: flex;
		justify-content: center;
	}
/* 底部样式 */
.footer {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 12px;
  border-top: 1px solid #eee;
}
</style>